<template>
  <div
    class="bar bar-tab menu fixed"
    style="display: flex;justify-content: space-around;background:#fff;"
  >
    <a
      class="tab-item external"
      id="bcMenu_1"
      href="javascript:;"
      :class="active=='首页'?'active':''"
      @click="goto('/')"
    >
      <span class="iconfont icon-shouye"></span>
      <span class="fontSize_22 tab-label">首页</span>
    </a>
    <a
      class="tab-item external"
      id="bcMenu_2"
      href="javascript:;"
      :class="active=='发现'?'active':''"
    >
      <span class="iconfont icon-faxian"></span>
      <span class="fontSize_22 tab-label">发现</span>
    </a>
    <a
      class="tab-item external"
      id="bcMenu_3"
      href="javascript:;"
      :class="active=='考试'?'active':''"
      @click="goto('/exam')"
    >
      <span class="iconfont icon-kaoshipeizhi"></span>
      <span class="fontSize_22 tab-label">考试</span>
    </a>
    <a
      class="tab-item external"
      id="bcMenu_3"
      href="javascript:;"
      :class="active=='班级'?'active':''"
    >
      <span class="iconfont icon-banjiguanli"></span>
      <span class="fontSize_22 tab-label">班级</span>
    </a>
    <a
      class="tab-item external"
      id="bcMenu_5"
      href="javascript:;"
      :class="active=='我的'?'active':''"
      @click="goto('/user')"
    >
      <span class="iconfont icon-wode"></span>
      <span class="fontSize_22 tab-label">我的</span>
    </a>
  </div>
</template>

<script>
import "@/css/main/iconfont.css";
export default {
  props: {
    active: {
      type: String,
      default: "首页"
    }
  },
  mounted() {
    // console.log(this.active);
  },
  methods: {
    goto(val) {
      if (this.$route.fullPath == val) return;
      this.$router.push(val);
    }
  }
};
</script>

<style scoped>
.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.bar-tab {
  bottom: 0;
  width: 100%;
  height: 0.94rem;
  padding: 0;
  table-layout: fixed;
}

.bar-tab:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: auto;
  right: auto;
  height: 1px;
  width: 100%;
  background-color: #e7e7e7;
  display: block;
  z-index: 15;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
}

.menu.bar-tab .tab-item.active,
.menu.bar-tab .tab-item:active,
.wm-buttons-tab .button.active {
  color: #3e83e5;
}

.menu.bar-tab .tab-item {
  color: #222;
  display: block;
  width: auto !important;
  height: auto;
}

.bar-tab .tab-item {
  position: relative;
  display: table-cell;
  width: 1%;
  height: 0.9rem;
  color: #929292;
  text-align: center;
  vertical-align: middle;
  padding: 0.18rem 0.36rem;
}

.bar-tab .tab-item .iconfont {
  top: 0.018rem;
  height: 0.433rem;
  font-size: 0.433rem;
  line-height: 0.433rem;
  padding-top: 0;
  padding-bottom: 0;
}

.bar .iconfont {
  position: relative;
  z-index: 20;
  /* padding: .18rem .36rem; */
  font-size: 0.36rem;
  line-height: 0.434rem;
}

.tab-label {
  display: block;
  font-size: 0.2rem !important;
  position: relative;
  top: -0.05rem;
}

.fontSize_22 {
  font-size: 0.22rem;
}
</style>